{% extends 'web_base/base_head_foot.html' %}
{% load staticfiles %}

{% block base_link_script %}
<link rel="stylesheet" href="{% static 'css/detail.css' %}"/>
{% endblock %}

{% block base_body %}
<div class="ui container main">
    <div class="image centered">
        <img src="/upload/images/top10.png">
    </div>
    <div class="ui tabular menu">
        <a class="active item item_hot">热门游戏榜 </a>
        <a class="item item_new">最新游戏榜 </a>
    </div>
    <div class="game_lst hot">
        {% for hot in hots %}
        <div class="ui card gm_ls">
            <div class="content">
                <a href="{% url 'real_game_detail' %}?id={{ hot.id }}" class="img">
                    <img class="left floated ui image" src="/upload/{{ hot.gamedetail.icon }}">
                    <button class="button ui">详情</button>
                </a>
                <div class="con">
                    <div class="header "><a href="{% url 'real_game_detail' %}?id={{ hot.id }}">{{ hot.name }}</a></div>
                    <div class="meta "><a href="{% url 'real_game_detail' %}?id={{ hot.id }}">{{ hot.gamedetail.factory }}</a></div>
                    <div class="meta con">{{ hot.gamedetail.detail | linebreaks }}</div>
                    <div class="description sty">{{ hot.gamedetail.belong_class.first }}<i class="ui icon star"></i><i class="ui icon star"></i><i class="ui icon star"></i><i class="ui icon star"></i>{{ hot.gamedetail.level }}</div>
                    <div class="description ">
                        <div class="content btn_list">
                            {% for te in hot.gamedetail.belong_class.all %}
                            <button class="ui button">{{ te.class_name }}</button>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="img_box">
                    <a href="{% url 'real_game_detail' %}?id={{ hot.id }}"><img src="/upload/{{ hot.gamedetail.image }}" alt=""/></a>
                </div>

                <span class="lt_list_bg"></span>
                <span class="lt_list_txt">1</span>
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="game_lst new hide">
        {% for new in news %}
        <div class="ui card gm_ls">
            <div class="content">
                <a href="{% url 'real_game_detail' %}?id={{ new.id }}" class="img">
                    <img class="left floated ui image" src="/upload/{{ new.gamedetail.icon }}">
                    <button class="button ui">详情</button>
                </a>
                <div class="con">
                    <div class="header "><a href="{% url 'real_game_detail' %}?id={{ new.id }}">{{ new.name }}</a></div>
                    <div class="meta "><a href="{% url 'real_game_detail' %}?id={{ new.id }}">{{ new.gamedetail.factory }}</a></div>
                    <div class="meta con">{{ new.gamedetail.detail | linebreaks }}</div>
                    <div class="description sty">{{ new.gamedetail.belong_class.first }}<i class="ui icon star"></i><i class="ui icon star"></i><i class="ui icon star"></i><i class="ui icon star"></i>{{ new.gamedetail.level }}</div>
                    <div class="description ">
                        <div class="content btn_list">
                            {% for te in new.gamedetail.belong_class.all %}
                            <button class="ui button">{{ te.class_name }}</button>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="img_box">
                    <a href="{% url 'real_game_detail' %}?id={{ new.id }}"><img src="/upload/{{ new.gamedetail.image }}" alt=""/></a>
                </div>

                <span class="lt_list_bg"></span>
                <span class="lt_list_txt">1</span>
            </div>
        </div>
        {% endfor %}

    </div>

    <div class="ui container">
        <a href="game_more.html"><button class="button ui">更多</button></a>
    </div>
</div>
{% endblock %}


{% block base_script %}
    $(function(){
        $('.item_hot').click(function () {
            $('.game_lst.new').addClass("hide");
            $('.game_lst.hot').removeClass("hide");
        });
        $('.item_new').click(function () {
            $('.game_lst.new').removeClass("hide");
            $('.game_lst.hot').addClass("hide");
        });
    });
{% endblock %}